<template>
  <div class="exam">

    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
      <el-form-item label="试卷名称">
        <el-input v-model="formInline.source" placeholder="请输入试卷名称"></el-input>
      </el-form-item>
      <el-form-item label="试卷类型">
        <el-input v-model="formInline.paperId" placeholder="请输入试卷类型"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getExamInfo()" size="small">查询</el-button>
        <el-button type="warning" @click="resetExamInfo()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="pagination.records" border size="small">

      <el-table-column fixed="left" prop="examCode" label="试卷编号" width="180"></el-table-column>
      <el-table-column fixed="left" prop="source" label="试卷名称"></el-table-column>
      <el-table-column prop="totalTime" label="持续时间" width="120"></el-table-column>
      <el-table-column prop="type" label="测试类型" width="120"></el-table-column>
      <el-table-column prop="description" label="介绍" width="250" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="330">
        <template slot-scope="scope">
          <el-button @click="viewTest(scope.row.paperId)" type="primary" size="small">查看</el-button>
          <el-button @click="addTest(scope.row.paperId)" type="primary" size="small">添加试题</el-button>
          <el-button @click="edit(scope.row.paperId)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row.paperId)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[ 10, 20]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total" class="page">
    </el-pagination>
    <!-- 编辑对话框-->
    <el-dialog
      title="编辑试卷信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="100px" size="small">
          <el-form-item label="试卷编号" prop="examCode">
            <el-input v-model="form.examCode"></el-input>
          </el-form-item>
          <el-form-item label="试卷名称" prop="source">
            <el-input v-model="form.source"></el-input>
          </el-form-item>

          <el-form-item label="试卷时间" prop="totalTime">
            <el-input v-model="form.totalTime"></el-input>
          </el-form-item>

          <el-form-item label="试卷类型" prop="type">
            <el-input v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="试卷介绍" prop="description">
            <el-input v-model="form.description" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submit()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <!--选择试题-->
    <el-dialog
      title="选择试题"
      :visible.sync="testVisible"

      width="80%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="题目信息">
          <el-input v-model="formInlineTest.name" placeholder="请输入题目信息"></el-input>
        </el-form-item>
        <el-form-item label="测试点">
          <el-input v-model="formInlineTest.tel" placeholder="请输入测试点"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getAnswerInfo">查询</el-button>
          <el-button type="warning" size="small" @click="resetAnswerInfo">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="paginationTest.records" border size="small" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="question" label="题目信息"></el-table-column>
        <el-table-column prop="type" label="题目类型" width="200" :formatter="typeFormatter"></el-table-column>
        <el-table-column prop="subject" label="测试点" width="150"></el-table-column>
        <el-table-column prop="level" label="难度等级" width="133">
          <template slot-scope="scope">
        <span v-if="scope.row.level">
          {{ scope.row.level }}级
        </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChangeTest"
        @current-change="handleCurrentChangeTest"
        :current-page="paginationTest.current"
        :page-sizes="[6, 10]"
        :page-size="paginationTest.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationTest.total"
        class="page"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
    <el-button @click="testVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitTest()">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    data () {
      return {
        form : {} , //保存点击以后当前试卷的信息
        pagination : { //分页后的考试信息
          current : 1 , //当前页
          total : null , //记录条数
          size : 10 //每页条数
        } ,
        formInlineTest : {
          name : '' ,
          tel : ''
        } ,
        paginationTest : { //分页后的考试信息
          current : 1 , //当前页
          total : null , //记录条数
          size : 10 //每页条数
        } ,
        dialogVisible : false ,
        testVisible : false ,
        rules : {
          source : [
            { required : true , message : "试卷名称不能为空" , trigger : "blur" }
          ] ,
          totalTime : [
            { required : true , message : "试卷总时长不能为空" , trigger : "blur" }
          ] ,
          type : [
            { required : true , message : "试卷类型不能为空" , trigger : "blur" }
          ]
        } ,
        formInline : {
          source : '' ,
          paperId : ''
        } ,
        ids : [] ,
        paperId : '' ,
        paperManage : {}
      }
    } ,
    created () {
      this.getExamInfo ()
    } ,
    methods : {
      edit ( examCode ) { //编辑试卷
        this.dialogVisible = true
        this.$axios ( `/api/exam/${ examCode }` ).then ( res => { //根据试卷id请求后台
          if ( res.data.code == 200 ) {
            this.form = res.data.data
          }
        } )
      } ,
      getAnswerInfo () {
        //分页查询所有试卷信息
        this.$axios (
          {
            methods : 'get' ,
            url : '/api/answers' ,
            params : {
              page : this.paginationTest.current ,
              size : this.paginationTest.size ,
              name : this.formInlineTest.name ,
              tel : this.formInlineTest.tel
            }
          }
        )
          .then ( res => {
            this.paginationTest = res.data.data;
          } )
          .catch ( error => {
          } );
      } ,
      handleClose ( done ) { //关闭提醒
        this.$confirm ( '确认关闭？' )
          .then ( _ => {
            done ();
          } ).catch ( _ => {
        } );
      } ,
      submit () { //提交修改后的试卷信息
        this.dialogVisible = false
        this.$axios ( {
          url : '/api/exam' ,
          method : 'put' ,
          data : {
            ... this.form
          }
        } ).then ( res => {
          if ( res.data.code == 200 ) {
            this.$message ( { //成功修改提示
              message : '更新成功' ,
              type : 'success'
            } )
          }
          this.getExamInfo ()
        } )
      } ,
      deleteRecord ( examCode ) {
        this.$confirm ( "确定删除该记录吗,该操作不可逆！！！" , "删除提示" , {
          confirmButtonText : '确定删除' ,
          cancelButtonText : '算了,留着' ,
          type : 'danger'
        } ).then ( () => { //确认删除
          this.$axios ( {
            url : `/api/exam/${ examCode }` ,
            method : 'delete' ,
          } ).then ( res => {
            this.getExamInfo ()
          } )
        } ).catch ( () => {

        } )
      } ,
      getExamInfo () { //分页查询所有试卷信息
        this.$axios (
          {
            methods : 'get' ,
            url : '/api/findAllExam' ,
            params : {
              page : this.pagination.current ,
              size : this.pagination.size ,
              type : this.formInline.paperId ,
              source : this.formInline.source
            }
          }
        ).then ( res => {
          this.pagination = res.data.data
        } ).catch ( error => {
        } )
      } ,
      //改变当前记录条数
      handleSizeChange ( val ) {
        this.pagination.size = val
        this.getExamInfo ()
      } ,
      //改变当前页码，重新发送请求
      handleCurrentChange ( val ) {
        this.pagination.current = val
        this.getExamInfo ()
      } ,

      //改变当前记录条数
      handleSizeChangeTest ( val ) {
        this.paginationTest.size = val
        this.getAnswerInfo ()
      } ,
      //改变当前页码，重新发送请求
      handleCurrentChangeTest ( val ) {
        this.paginationTest.current = val
        this.getAnswerInfo ()
      } ,
      resetExamInfo () {
        this.formInline.source = ''
        this.formInline.paperId = ''
        this.getExamInfo ()
      } ,
      addTest ( paperId ) {
        this.getAnswerInfo ()
        this.paperId = paperId
        this.testVisible = true
      } ,
      resetAnswerInfo () {
        this.formInline.name = ''
        this.formInline.tel = ''
        this.getAnswerInfo ()
      } ,
      handleSelectionChange ( selection ) {
        this.ids = []
        this.ids = selection
      } ,
      typeFormatter ( row ) {
        switch ( row.type ) {
          case '1':
            return '选择题'
          case '2':
            return '填空题'
          default:
            return '判断题'
        }
      } ,
      submitTest () {
        console.log ( this.ids )
        this.paperManage.answerVOS = this.ids
        this.paperManage.paperId = this.paperId
        this.$axios ( {
          url : '/api/paperManage' ,
          method : 'post' ,
          data : {
            ... this.paperManage
          }
        } ).then ( res => {
          if ( res.data.code == 200 ) {
            this.$message ( {
              message : '数据添加成功' ,
              type : 'success'
            } )
            this.getExamInfo ()
            this.testVisible = false
          }
        } )
      } ,
      viewTest ( id ) {
        this.$router.push ( { path : '/testResult' , query : { id : id } } )
      }
    } ,
  };
</script>
<style lang="scss" scoped>
  .exam {
    padding: 0px 40px;

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit {
      margin-left: 20px;
    }
  }
</style>
